<template>
  <div class="coachPage">
    <go-top :size="60" bg-color="#2e2efe" :bottom="60"></go-top>
    <div class="topInfo">
      <div class="comBox">
        <h1 class="tit">온라인 코칭 서비스</h1>
        <p class="big">
          <b>중장년의 성공적인 </b>재취업을 돕습니다.
        </p>
        <p class="des">
          <b>이력서 작성부터 모의 면접까지! </b>
          <b>시간과 장소에 구애받지 않고 인생 2막 일자리를 준비해보세요.</b>
          모든 서비스는 온라인을 통해 제공되며 워크위즈 중장년 취업 전문 컨설턴트가 함께합니다.
        </p>
        <img class="pic" src="@images/coach/coachMain.png" alt="">
      </div>
    </div>
    <div class="totals">
      <div class="item">
        <countTo class="num" :startVal='0' :endVal='total' :duration='3000' separator=','></countTo>
        <label>누적 이용자수</label>
      </div>
      <div class="item">
        <countTo class="num" :startVal='0' :endVal='curNum' :duration='3000' separator=','></countTo>
        <label>현재 이용중인 고객수</label>
      </div>
    </div>
    <div class="serviceBox">
        <ul>
          <li v-for="(item,index) in serviceList" :key="index">
            <div class="pic">
              <img :src="item.icon" alt="">
            </div>
            <div class="info">
              <label>{{item.company}}</label>
              <strong>{{item.title}}</strong>
            </div>
            <a href="javascript:;" target="_self" class="btn" @click="scrollAnchorPoint(item.anchor)">자세히보기</a>
          </li>
        </ul>
    </div>
    <div class="infoList">
      <div class="item" id="coachAnchor1">
        <div class="info">
          <h3>취업 상담</h3>
          <p class="tit">실시간 화상통화를 활용한<b>진로 및 재취업 상담 서비스</b></p>
          <p class="des">인생2막 설계에 노하우를 가지고 있는 전문 상담사가 온라인 화상통화를 활용하여,<br/>실시간으로 상담 서비스를 제공합니다. 막연한 인생2막의 방향을 함께 고민합니다.</p>
          <dl>
            <dd><i><img src="@images/coach/ico_kf.png" alt=""></i>Zoom이나 구글 행아웃으로 화상 상담 진행(1시간)<br>(전화로 상담 진행 가능(1시간))</dd>
            <dd><i><img src="@images/coach/ico_info.png" alt=""></i>상담 완료 후 상담 내용에 대한 보고서 제공</dd>
            <dd><i><img class="b" src="@images/coach/ico_all.png" alt=""></i>진로부터 재취업 방법에 대한 모든 사항 가능</dd>
          </dl>
          <router-link to="/coach/online" class="btn">서비스 이용하기</router-link>
        </div>
        <div class="pic">
          <img src="@images/coach/1.jpg" alt="">
        </div>
      </div>
      <div class="item" id="coachAnchor2">
        <div class="pic">
          <img src="@images/coach/2.jpg" alt="">
        </div>
        <div class="info">
          <h3>이력서 클리닉</h3>
          <p class="tit">이력서 진단, 분석 및<b>이력서 작성 가이드 서비스</b></p>
          <p class="des">이력서 작성에 어려움을 가진 분들에게, 역량과 경험이 돋보일 수 있도록<br/>보내주신 이력서를 진단하고 분석한 후, 이력서 작성 가이드를 제시해 드립니다.</p>
          <dl>
            <dd><i><img src="@images/coach/ico_up.png" alt=""></i>이력서 업로드 후 전문가 진단</dd>
            <dd><i><img class="m" src="@images/coach/ico_chceks.png" alt=""></i>이력서에서 수정할 부문 체크 및 피드백 제공</dd>
            <dd><i><img src="@images/coach/ico_info.png" alt=""></i>6가지 진단 항목에 대한 보고서 제공</dd>
          </dl>
          <router-link to="/coach/resume" class="btn">서비스 이용하기</router-link>
        </div>
      </div>
      <div class="item" id="coachAnchor3">
        <div class="info">
          <h3>채용정보서칭</h3>
          <p class="tit">온라인 채용 정보 <b>검색 대행 서비스</b></p>
          <p class="des">나에게 맞는 일자리는 어디에 있을까요? 취업정보 사이트(잡코리아, 사람인, 워크넷 등)에<br/>게시된 채용 정보 중, 도전 가능한 중장년 취업 전문 잡 매니저가 대신 찾아드립니다.</p>
          <dl>
            <dd><i><img class="s" src="@images/coach/ico_ser.png" alt=""></i>국내 5대 일자리 사이트에서 고객에게 맞는 일자리 검색</dd>
            <dd><i><img class="s" src="@images/coach/ico_list.png" alt=""></i>검색된 일자리 중 적합한 일자리 선별</dd>
            <dd><i><img src="@images/coach/ico_info.png" alt=""></i>각 일자리에 대한 지원 전략 등을 포함한 결과지 제공</dd>
          </dl>
          <router-link to="/coach/matching" class="btn">서비스 이용하기</router-link>
        </div>
        <div class="pic">
          <img src="@images/coach/3.jpg" alt="">
        </div>
      </div>
      <div class="item" id="coachAnchor4">
        <div class="pic">
          <img src="@images/coach/4.jpg" alt="">
        </div>
        <div class="info">
          <h3>모의 서류전형</h3>
          <p class="tit">유사업종 대표자 및 인사담당자의<b>이력서 검토 서비스</b></p>
          <p class="des">이력서 제출 전, 내 이력서가 매력적으로 보일지 현장 대표자 및 인사 담당자에게<br/>직접 피드백을 받아보세요. 생생한 피드백으로 서류 심사 가능성을 높여드립니다.</p>
          <dl>
            <dd><i><img class="m" src="@images/coach/ico_msg.png" alt=""></i>실제 기업 대표자 및 인사 담당자가 피드백 제공</dd>
            <dd><i><img class="m" src="@images/coach/ico_check.png" alt=""></i>강조할 부분과 보완할 부분에 대한 의견 제공</dd>
            <dd><i><img src="@images/coach/ico_info.png" alt=""></i>최종 검토 결과지를 직접 작성하여 제공</dd>
          </dl>
          <router-link to="/coach/basic" class="btn">서비스 이용하기</router-link>
        </div>
      </div>
      <div class="item" id="coachAnchor5">
        <div class="info">
          <h3>모의 면접</h3>
          <p class="tit">실시간 온라인<b>모의 면접 서비스</b></p>
          <p class="des">면접 날짜가 잡혔나요? 전문 면접관으로부터 언제 어디서나 내가 원하는 장소에서 온라인으로<br/>모의 면접을 진행해보세요. 전문가의 컨설팅으로 실전 면접 스킬이 향상됩니다</p>
          <dl>
            <dd><i><img class="b" src="@images/coach/ico_deskop.png" alt=""></i>Zoom이나 구글 행아웃으로 화상 모의 면접 진행(1시간)</dd>
            <dd><i><img src="@images/coach/ico_user.png" alt=""></i>전문 면접관이 참여하여 면접 대비 필요 사항 점검</dd>
            <dd><i><img src="@images/coach/ico_info.png" alt=""></i>강점 및 보완점에 대한 내용을 담은 결과지 제공</dd>
          </dl>
          <router-link to="/coach/interview" class="btn">서비스 이용하기</router-link>
        </div>
        <div class="pic">
          <img src="@images/coach/5.jpg" alt="">
        </div>
      </div>
    </div>
    <div class="flows">
      <h3>서비스 이용 프로세스</h3>
      <p class="info">워크위즈의 <b>전문 채용 코칭 서비스</b>를 이용해 보세요.<br/>중장년 취업 전문 컨설턴트가 당신의 성공을 돕습니다.</p>
      <ul>
        <li>
          <img src="@images/coach/step_1.png" alt="">
          <strong>서비스 신청</strong>
          <p>5가지 서비스 중<br/>원하는 서비스를 선택하고<br/>정보 입력과 결제 후<br/>신청을 완료합니다.</p>
        </li>
        <li>
          <img src="@images/coach/step_2.png" alt="">
          <strong>진행 일정 확인</strong>
          <p>신청이 완료되면<br/>담당 컨설턴트가<br/>일정 및 추가 정보를<br/>안내해드립니다</p>
        </li>
        <li>
          <img src="@images/coach/step_3.png" alt="">
          <strong>서비스 진행</strong>
          <p>선택하신 서비스의<br/>특성에 맞게<br/>비대면으로<br/>진행합니다</p>
        </li>
        <li>
          <img src="@images/coach/step_4.png" alt="">
          <strong>서비스 보고서 수령</strong>
          <p>모든 서비스 수행 후<br/>취업 컨설턴트가 직접<br/>결과지를 작성 후<br/>제공합니다.</p>
        </li>
        <li>
          <img src="@images/coach/step_5.png" alt="">
          <strong>서비스 완료</strong>
          <p>최종 보고서 확인 후<br/>서비스가<br/>완료됩니다.</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
import { serviceStatistics } from '@/api'
import countTo from 'vue-count-to';
import  GoTop  from '@inotom/vue-go-top';

// import $ from 'jquery';

export default {
  name:'',
  components:{ countTo,GoTop },
  props:[],
  data(){
    return {
      total:0,
      curNum:0,
      serviceList:[
        {
          id:1,
          icon:require('@/assets/images/icons/1.png'),
          company:'취업 상담',
          title:'실시간 화상통화를 활용한 진로 및 재취업 상담 서비스',
          anchor:'coachAnchor1'
        },
        {
          id:2,
          icon:require('@/assets/images/icons/2.png'),
          company:'이력서 클리닉',
          title:'이력서 진단, 분석 및 이력서 작성 가이드 서비스',
          anchor:'coachAnchor2'
        },
        {
          id:3,
          icon:require('@/assets/images/icons/3.png'),
          company:'채용정보서칭',
          title:'온라인 취업 정보 검색 대행 서비스',
          anchor:'coachAnchor3'
        },
        {
          id:4,
          icon:require('@/assets/images/icons/4.png'),
          company:'모의 서류전형',
          title:'유사업종 대표자 및 인사 담당자의 이력서 검토 서비스',
          anchor:'coachAnchor4'
        },
        {
          id:5,
          icon:require('@/assets/images/icons/5.png'),
          company:'모의 면접',
          title:'실시간 온라인 모의 면접 서비스',
          anchor:'coachAnchor5'
        }
      ]
    }
  },
  computed:{
    ...mapState(['token','anchor'])
  },
  created(){
    this.serviceStatistics();
  },
  mounted(){
  },
  methods:{
    ...mapActions(['setAnchor']),
    async serviceStatistics(){
      let _this=this, res = await serviceStatistics();
      if (res.code == 200) {
        this.total=res.data.all;
        this.curNum=res.data.new;
      }
    },
    scrollAnchorPoint(id){
      var _top=$('#'+id).offset().top,_h=$('header').height();
        $('body,html').animate({scrollTop: _top-_h-60},500);
    }
  },
  watch:{}
}
</script>
<style lang="scss" scoped>
  @import "@/assets/styles/coach.scss";
</style>
